<template>
  <!-- 孪生健康组件 -->
  <div class="TwinHealth-box">
    <div class="TwinHealth-box-title">
      <BoxTitle />
    </div>
    <div class="TwinHealth-title-JKD">
      <div class="BoxTitle-title-fangkuai"></div>
      <div class="BoxTitle-title-title">健康度排行</div>
    </div>
    <div class="TwinHealth-title-CZJKD">
      <div class="BoxTitle-title-fangkuai"></div>
      <div class="BoxTitle-title-title">场站健康度</div>
    </div>
    <div class="TwinHealth-echarts">
      <HealthlevelEcharts />
    </div>
    <div class="TwinHealth-jianpai-box">
      <div class="jianpai-item">
        <div class="jianpai-mingzi">电芯一致性</div>
        <div class="jianpai-Num digiTal1">99.9</div>
        <div class="jianpai-danwei">%</div>
      </div>
      <div class="jianpai-item">
        <div class="jianpai-mingzi">通讯传感</div>
        <div class="jianpai-Num digiTal1">99.9</div>
        <div class="jianpai-danwei">%</div>
      </div>
      <div class="jianpai-item">
        <div class="jianpai-mingzi">整站离群度</div>
        <div class="jianpai-Num digiTal1">99.9</div>
        <div class="jianpai-danwei">%</div>
      </div>
      <div class="jianpai-item">
        <div class="jianpai-mingzi">电气一次连接</div>
        <div class="jianpai-Num digiTal1">99.9</div>
        <div class="jianpai-danwei">%</div>
      </div>
      <div class="jianpai-item">
        <div class="jianpai-mingzi">热管理系统</div>
        <div class="jianpai-Num digiTal1">99.9</div>
        <div class="jianpai-danwei">%</div>
      </div>
      <div class="jianpai-item">
        <div class="jianpai-mingzi">汇总综合性能</div>
        <div class="jianpai-Num digiTal1">99.9</div>
        <div class="jianpai-danwei">%</div>
      </div>
    </div>
  </div>
</template>
<script setup>
import BoxTitle from "./BoxTitle.vue"
import HealthlevelEcharts from "@/view/Twinoperation/HealthlevelEcharts.vue"
</script>
<style scoped lang="less">
.TwinHealth-box {
  width: 100%;
  height: 100%;
  background: url("@/assets/TwinSafety/tanchuang_luanshengyunxing.png")
    no-repeat center;
  background-size: 100% 100%;
  .TwinHealth-box-title {
    position: absolute;
    width: 100%;
    height: 88px;
    margin-top: 22px;
  }
  .TwinHealth-title-JKD {
    position: absolute;
    top: 110px;
    left: 20px;
    width: 100px;
    height: 35px;
    display: flex;
    align-items: center;
    .BoxTitle-title-fangkuai {
      width: 10px;
      height: 10px;
      background: url("@/assets/TwinSafety/icon_xiaobiaoti.png") no-repeat
        center;
      background-size: 120% 120%;
    }
    .BoxTitle-title-title {
      color: #fff;
      text-shadow: 2px 2px 2px #50729c;
      margin-left: 5px;
      font-size: 14px;
      font-weight: 600;
      width: 60px;
      white-space: nowrap;
    }
  }
  .TwinHealth-title-CZJKD {
    position: absolute;
    top: 355px;
    left: 20px;
    width: 100px;
    height: 35px;
    display: flex;
    align-items: center;
    .BoxTitle-title-fangkuai {
      width: 10px;
      height: 10px;
      background: url("@/assets/TwinSafety/icon_xiaobiaoti.png") no-repeat
        center;
      background-size: 120% 120%;
    }
    .BoxTitle-title-title {
      color: #fff;
      text-shadow: 2px 2px 2px #50729c;
      margin-left: 5px;
      font-size: 14px;
      font-weight: 600;
      width: 60px;
      white-space: nowrap;
    }
  }
  .TwinHealth-echarts {
    left: 20px;
    top: 145px;
    position: absolute;
    width: 447px;
    height: 176px;
    // background-color: red;
  }
  .TwinHealth-jianpai-box {
    position: absolute;
    width: 100%;
    height: 100px;
    top: 380px;
    box-sizing: border-box;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .jianpai-item {
      width: 140px;
      height: 35px;
      background: url("@/assets/jiankang/shujuzhanshi_changzhanjiankandu.png")
        no-repeat center;
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      .jianpai-mingzi {
        width: 50px;
        color: #fff;
        font-size: 10px;
        margin-left: 5px;
        white-space: nowrap;
      }
      .jianpai-Num {
        width: 100px;
        color: #fff;
        font-size: 20px;
        margin-left: -30px;
        text-align: right;
      }
      .jianpai-danwei {
        width: 10px;
        text-align: right;
        font-size: 10px;
        color: #fff;
      }
    }
  }
}
</style>
